<template>
  <div class="box">
    <div class="top_back">
      <div class="el-icon-arrow-left" @click="$router.go(-1)"></div>
      <div class="top_logo"><img src="../../../../assets/static/register/l1.png" alt=""></div>
      <div class="card">
        <div class="card_title">请输入发送到以下号码的6位数验证码</div>
        <div class="card_mobile">
          <span>{{ areaCode }}</span>
          <span style="margin-left: 10px">{{ phone }}</span>
        </div>
        <div class="card_code">
          <!--          <input/>-->
          <div v-for="(item,index) in verifyCode" :key="index">
            <input
              @keydown.delete="e=>{verifyDel(e,index)}"
              ref="input"
              @input="beInput(index)"
              type="number"
              v-model="verifyCode[index]"/>
          </div>
          <!--          <div><input type="number"></div>-->
          <!--          <div><input type="number"></div>-->
          <!--          <div><input type="number"></div>-->
          <!--          <div><input type="number"></div>-->
        </div>
        <div class="card_question">没有收到验证码?</div>
        <div @click="sendVerify" class="card_btn">发送验证码</div>
      </div>
    </div>
  </div>
</template>

<script>
import {login, sendVerify} from '@/api/merbership/login'
import {setToken, getToken, setReferToken} from '@/utils/tokenTools'

export default {
  data() {
    return {
      areaCode: '',
      phone: '',
      verifyCode: ['', '', '', '', '', ''],
      verifyStr: ''
    }
  },
  mounted() {
    this.areaCode = this.$route.query.areacode
    this.phone = this.$route.query.phone
    this.sendVerify()
  },
  methods: {
    /**
     * 删除
     * @param e
     * @param index
     */
    verifyDel(e, index) {
      if (index > 0) {
        if (this.verifyCode[index] === '') {
          console.log(this.verifyCode[index])
          this.$refs.input[index - 1].focus()
        }
      }
    },
    /**
     * 输入
     * @param index
     */
    beInput(index) {
      if (index === 5) {
        console.log(this.verifyCode.join(''))
        this.verifyStr = this.verifyCode.join('')
        this.login()
        return ''
      }
      if (index < this.verifyCode.length) {
        if (this.verifyCode[index].length >= 1) {
          this.$refs.input[index + 1].focus()
        }
      }
    },
    // --------------------- axios --------------------
    /**
     * 登录
     */
    login() {
      const pd = {
        mobile: this.phone,
        code: this.verifyStr
      }
      login(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            setReferToken(res.data.data.refer_token)
            if (setToken(res.data.data.token) === getToken()) {
              let that = this
              setTimeout(() => {
                that.$router.push({path: '/listhome'})
              }, 1000)
            }
          } else if (res.data.code === 0) {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 发送验证码
     */
    sendVerify() {
      const pd = {
        phone: this.phone,
      }
      sendVerify(this.$qs.stringify(pd))
        .then(res => {
          this.$message.success(res.data.msg)
        })
    }
  },
  // watch: {
  //   verifyCode(val) {
  //     console.log(val)
  //     // if (val.length === 6) {
  //     //   // this.login()
  //     // }
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  background-color: #fff;
}

.top_back {
  background-image: url(../../../../assets/static/register/b2.png);
  background-repeat: no-repeat;
  background-size: 100%;

  .el-icon-arrow-left {
    color: #FFFFFF;
    padding: 30px 15px;
  }

  .top_logo {
    text-align: center;

    img {
      width: 263px;
    }
  }

  .card {
    margin: 15px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 15px #CCCCCC;
    border-radius: 10px;

    .card_title {
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      margin: 30px 0 50px 0;
    }

    .card_mobile {
      color: #999999;
      font-size: 14px;
    }

    .card_code {
      display: flex;

      > div {
        width: 75px;
        padding: 15px 0 20px 0;
        background-image: url(../../../../assets/static/register/b1.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
      }

      input {
        text-align: center;
        width: 20px;
        height: 20px;
        font-size: 15px;
        font-weight: bold;
        border: none;
        outline: none;
      }
    }

    .card_question {
      text-align: center;
      color: #61BF02;
      font-size: 11px;
      margin: 30px 0 10px 0;
    }

    .card_btn {
      background-image: url(../../../../assets/static/register/b3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 294px;
      text-align: center;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: bold;
      padding: 25px 0 35px 0;
    }
  }
}
</style>
